<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>top排序</title>
    <script src="./js/package/dist/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:380px;height:570px;background-color: #2d1e59;"></div>
    <script>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        const names = ["金华","义乌", "东阳","兰溪","浦江","磐安","塔石", "新狮","武义","永康"]
        const values = [ 101, 881, 2054, 2222, 3551, 4000, 4551,4571, 8522, 9552]
        // const myColor = ['rgba(16,190,255)', '#FF8E4D', '#56D0E3', '#1089E7', '#F57474','#1089E7', '#FF8E4D', '#56D0E3', '#1089E7', '#F57474']
        const option = {
            xAxis: {
                show: false
            },
            yAxis: [{
                show: true,
                data: names,
                axisLine: 'none',
                splitLine: {
                    show: false
                },
                axisTick:'none',
                axisLabel: {
                    color: '#7337cd', // 字体颜色
               }
            }],
            series: [
                {
                    type: 'bar',
                    data: values,
                    // 柱形渐变     
                    itemStyle: {
                        color: function (params) {
                            if(params.dataIndex<4)
                            {
                                return  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 1,
                                    color: '#10f9ff'
                                },
                                {
                                    offset: 0.5,
                                    color: '#09e0ff'
                                },
                                {
                                    offset: 0,
                                    color: '#10beff'
                                }
                                ])
                            }
                            else if(params.dataIndex>=4&&params.dataIndex<=6){
                                return  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 1,
                                    color: '#fdc645'
                                },
                                {
                                    offset: 0.5,
                                    color: '#ffa722'
                                },
                                {
                                    offset: 0,
                                    color: '#ff7d05'
                                }
                                ])
                            }
                            else if(params.dataIndex>6){
                                return  new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 1,
                                    color: '#f79ebc'
                                },
                                {
                                    offset: 0.5,
                                    color: '#ee4d93'
                                },
                                {
                                    offset: 0,
                                    color: '#dd0978'
                                }
                                ])
                            }
                        },
                        borderRadius: [0, 10, 10, 0]
                    },
                    barWidth:"15", // 柱宽度
                    // 柱背景
                    showBackground:true,
                    backgroundStyle:{
                        color: '#381d6c',
                        borderRadius: [0, 10, 10, 0] 
                    }
                }
           ]
        }
        option && myChart.setOption(option);
    </script>
</body>
</html>
